<template>
    <div class="!overflow-visible max-w-fit backdrop-blur-sm bg-white/80 h-[4.5rem] flex items-center justify-between px-4 rounded-b-2xl mx-auto gap-4">
        <!-- 顶部导航栏 -->
        <!-- 左侧博客用户信息 -->
        <div class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"> 
            <button class="flex flex-row text-black items-center text-md cursor-pointer">
                <img src="http://t4hiq2jzc.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241031141912.jpg"
                class="w-[1.75rem] h-[1.75rem] rounded-full mr-2">
                黑夜
            </button>
        </div>

        <!-- 中间 5个导航按钮 --> 
        <div class="hidden md:flex items-center space-x-1">
            <template v-for="(item, index) in icons" :key="index">
                <div class="dropdown-container">
                    <router-link 
                            v-if="item.path"
                            :to="{ name: item.path }" 
                            class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95">
                        <div class="flex items-center">
                            <SvgIcon :name="item.icon" class="w-[1rem] h-[1rem] text-[1.1rem] mr-2"></SvgIcon>
                            {{ item.text }}
                            <SvgIcon v-show="item.downArrow" name="down-arrow" class="w-[1rem] h-[1rem] text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1"></SvgIcon>
                        </div>
                    </router-link>

                    <!-- 对于没有路径的项，保持原样 -->
                    <button v-else 
                            class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95">
                        <div class="flex items-center">
                            <SvgIcon :name="item.icon" class="w-[1rem] h-[1rem] text-[1.1rem] mr-2"></SvgIcon>
                            {{ item.text }}
                            <SvgIcon v-show="item.downArrow" name="down-arrow" class="w-[1rem] h-[1rem] text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1"></SvgIcon>
                        </div>
                    </button>
                    <div v-show="item.downArrow" class="dropdown-menu">
                        <div class="dropdown-content">
                            <div class="dropdown-item">占位</div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- 搜索框 -->
        <!-- 搜索框容器：大屏显示 Flex布局 过渡动画 垂直居中 高度44px 右外边距8px 大圆角 浅色背景 悬停/聚焦加深 深色模式适配 -->   
        <div class="hidden lg:flex transition-all items-center h-11 mr-2 rounded-lg 
                bg-black/[0.04] hover:bg-black/[0.06] focus-within:bg-black/[0.06] 
                dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10">
            <!-- 搜索图标：绝对定位 字体20px 点击穿透 左外边距12px 过渡动画 垂直居中 黑色30%透明度 深色模式白色30%透明度 -->
            <SvgIcon name="search" class="absolute w-[1rem] h-[1rem] text-[1.25rem] pointer-events-none ml-3 
                    transition my-auto text-black/30 dark:text-white/30 iconify
                    iconify--material-symbols" color="#808080"></SvgIcon>
            <!-- 输入框：过渡动画 左内边距40px 小号字体 透明背景 无轮廓 全高度 宽度160px 激活/聚焦时宽度240px 黑色50%透明度 深色模式白色50%透明度 -->
            <input class="transition-all pl-10 text-sm bg-transparent outline-0 h-full w-40 active:w-60 focus:w-60
                     text-black/50 dark:text-white/50 svelte-15pne9z" 
                    placeholder="搜索">
        </div>

                    
        <!-- 右侧按钮 -->
        <div class="flex">
            <template v-for="(item, index) in rightIcons" :key="index">
                <div class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90">
                    <SvgIcon :name="item.icon" class="w-[1rem] h-[1rem]"></SvgIcon>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import SvgIcon from "./SvgIcon.vue";

import { ref } from 'vue'

const icons = ref([
    {text: '主页', icon: 'home', path: 'Home' , downArrow: false},
    {text: 'AI', icon: 'ai', path: 'AI' , downArrow: false},
    {text: '友链', icon: 'user-multiple', path: 'FriendLink' ,  downArrow: false},
    {text: '链接', icon: 'link', path: null, downArrow: true},
    {text: '关于', icon: 'info', path:'About', downArrow: true},
])

const rightIcons = ref([
    {icon: 'palette'},
    {icon: 'computer'},
])

</script>

<style scoped>
</style>